<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { fetchGetActivityNumberRank } from '@/api/screen/activity'
import { filterDate } from "@/utils/format";

const getNumberRank = async () => {
  const res = await fetchGetActivityNumberRank()
  listData = res.data

}

onMounted(() => {
  getNumberRank()
})

let listData = ref([
  {
    activity: '歌唱大赛',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    activity: '校园街舞大赛',
    type: 2,
    operate: 1,
    number: 12
  },
  {
    activity: '校园篮球大赛',
    type: 1,
    operate: 3,
    number: 12
  },
  {
    activity: '第一节书法大赛',
    type: 2,
    operate: 1,
    number: 12
  },
  {
    activity: '铅笔',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    activity: '铅笔',
    type: 2,
    operate: 1,
    number: 12
  },
  {
    activity: '彩色马克笔',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    activity: '铅笔',
    type: 2,
    operate: 4,
    number: 12
  },
  {
    activity: '乔丹牌篮球',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    activity: '红双喜乒乓球拍',
    type: 1,
    operate: 2,
    number: 12
  },
  {
    activity: '李宁网球拍',
    type: 2,
    operate: 1,
    number: 12
  },
  {
    activity: '铅笔',
    type: 1,
    operate: 3,
    number: 12
  },
  {
    activity: '铅笔',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    activity: '铅笔',
    type: 1,
    operate: 2,
    number: 12
  },
  {
    activity: '铅笔',
    type: 1,
    operate: 1,
    number: 12
  },
  {
    activity: '铅笔',
    type: 1,
    operate: 4,
    number: 12
  },
  {
    activity: '铅笔',
    type: 1,
    operate: 4,
    number: 12
  },
])

function filterType(val: number) {
  switch (val) {
    case 0:
      return '社团活动';
    case 1:
      return '院级活动';
    case 2:
      return '校级活动';
  }
}
</script>

<template>
  <div class="seamless-scroll">
    <div class="table-header">
      <div class="table-item">活动名称</div>
      <div class="table-item">级别</div>
      <div class="table-item">参加人数</div>
      <div class="table-item">开始时间</div>
    </div>
    <vue3-seamless-scroll hover-stop="true" :list="listData" :hover="true" :limitScrollNum="15" :step="0.2"
      class="table-content">
      <div class="table-list" v-for="(item, index) in listData" :key="index">
        <div class="table-item">{{ item.name }}</div>
        <div class="table-item">{{ filterType(item.type) }}</div>
        <div class="table-item">{{ item.nowNumber }}</div>
        <div class="table-item">{{ filterDate(item.formalStartTime) }}</div>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>
<style lang="scss" scoped>
.seamless-scroll {
  display: grid;
  grid-template-rows: 0.8fr 9.2fr;
  height: 23rem;
  margin-top: 1rem;

  .table-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.5rem 0;
    background-color: #1d4b7492;


    .table-item {
      place-self: center;
      padding: 0 2rem;
      font-weight: 700;
      font-size: 1.4rem;
      color: #16c0c3;
    }
  }

  .table-content {
    overflow: hidden;


    .table-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      color: #aaa;

      &:nth-child(2n-1) {
        background-color: #1128408f;
      }

      .table-item {
        place-self: center;
        padding: 0.5rem 0;


      }
    }
  }


}
</style>
